import React, { Component, Fragment } from 'react';
import moment from 'moment';
import { Card, Form, Input, Button, Radio, InputNumber,
	Select, Checkbox, Switch, DatePicker, TimePicker, Upload }
from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import './form.less';
const FormItem = Form.Item;
const { Option } = Select;
const TextArea = Input.TextArea;
const layout = {
	labelCol: {
		span: 6,
	},
	wrapperCol: {
		span: 18,
	},
};
const tailLayout = {
	wrapperCol: {
		offset: 6,
		span: 18,
	},
};
const config = {
  rules: [
    {
      type: 'object',
      required: true,
      message: 'Please select time!',
    },
  ],
};
class FormReg extends Component {
	formRef = React.createRef();
	onFinish = values => {
		console.log(values);
	}
	onReset = () => {
		this.formRef.current.resetFields();
	};
	onFill = () => {
		this.formRef.current.setFieldsValue({
		    username: 'Hello world!',
			pwd: 'male',
		});
	};
	onGenderChange = value => {
		this.formRef.current.setFieldsValue({
			username: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
		});
	};
	normFile = e => {
		console.log('Upload event:', e);

		if (Array.isArray(e)) {
			return e;
		}

		return e && e.fileList;
	};
	render(){
		return (
			<Fragment>
				<Card title="注册表单" className="card-wrap">
					<Form 
						{...layout} 
						ref={this.formRef}
						name="control-ref"
						onFinish={this.onFinish}
						initialValues={{
							'remember': 'A',
							'switch': true,
							'datepicker': moment('2020-06-10')
						}}
					>
						<FormItem
							name="username"
							label="username"
							rules={[
								{required: true, message: "请输入账号"}
							]}
						>
							<Input />
						</FormItem>
						<FormItem
							name="pwd"
							label="密码"
							rules={[
								{required: true, message: "请输入密码"},
								{min:6,max:10,message:"长度不在范围内"},
								{pattern: /^\w/g, message: "必须以字母开头"}
							]}
							hasFeedback
						>
							<Input.Password />
						</FormItem>
						<FormItem
							name="aihao"
							label="爱好"
						>
							<Radio.Group>
							    <Radio.Button value="a">item 1</Radio.Button>
							    <Radio.Button value="b">item 2</Radio.Button>
							    <Radio.Button value="c">item 3</Radio.Button>
							</Radio.Group>
						</FormItem>
						<Form.Item label="年龄">
							<Form.Item name="input-number" noStyle>
							  <InputNumber min={1} max={100} />
							</Form.Item>
							<span className="ant-form-text">提示信息</span>
						</Form.Item>
						<FormItem
							name="gender"
							label="多选下拉框"
							rules={[
								{required: true,},
							]}
						>
							<Select
								placeholder="请选择"
								onChange={this.onGenderChange}
								mode="multiple"
							>
								<Option value="male">male</Option>
								<Option value="female">female</Option>
								<Option value="other">other</Option>
								<Option value="ehy">ehy</Option>
							</Select>
						</FormItem>
						<Form.Item name="switch" label="开关" valuePropName="checked">
							<Switch />
						</Form.Item>
						<Form.Item name="datepicker" label="日期" {...config}>
							<DatePicker />
						</Form.Item>
						<Form.Item name="timepicker" label="时间" {...config}>
							<TimePicker />
						</Form.Item>
						<Form.Item name="textarea" label="联系地址">
							<TextArea autoSize={{minRows:5, maxRows: 10}} />
						</Form.Item>
						<Form.Item
							name="upload"
							label="上传"
							valuePropName="fileList"
							getValueFromEvent={this.normFile}
							extra="描述信息"
						>
							<Upload 
								name="logo" 
								action="//jsonplaceholder.typicode.com/posts/" 
								listType="picture"
								showUploadList={true}
							>
							    <Button>
									<UploadOutlined />点击这里上传
							    </Button>
							</Upload>
						</Form.Item>
						<FormItem {...tailLayout}>
							<FormItem name="remember" valuePropName="checked" noStyle>
							    <Checkbox value="A">单车协议</Checkbox>
							</FormItem>
						</FormItem>
						<FormItem {...tailLayout}>
							<Button type="primary" htmlType="submit">登录</Button>
							<Button htmlType="button" onClick={this.onReset}>
								重置
							</Button>
							<Button type="link" htmlType="button" onClick={this.onFill}>
								填充
							</Button>
						</FormItem>
					</Form>
				</Card>
				
			</Fragment>
		)
	}
}

export default FormReg;